<template>
  <view class="content">
    <z-paging ref="paging" v-model="list" @query="queryList">
      <template #top>
        <image class="logo" src="/static/logo.png" @click="showAlert"></image>
        <view class="text-area">
          <text class="text-[30rpx] text-[#acd]">{{ computedTitle }}</text>
        </view>
        <uv-icon name="photo" size="40px" @click="reset"></uv-icon>
      </template>
       <view class="p-5 m-5 bg-red-300 flex items-center justify-center" v-for="(item,index) in list" :key="index" @click="didTapItem(index)">
          {{item + '-' + userId}}
        </view>   
    </z-paging>
    <xy-alert ref="alert"></xy-alert>
  </view>
</template>

<script setup>
  import { ref, reactive, watch, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  // import tools from '@/utils/tools/index.js';
  import {toast, loading} from '@/utils/modals/index.js';
  // import { useStore } from 'vuex';
  import { useUserStore } from '@/store/user.js';
  import { storeToRefs } from 'pinia';
  
  const title = ref('Hello World');
  const info = reactive({name: 'xy', age: 18});
  const list = reactive([]);
  const store = useUserStore();

  const { userId } = storeToRefs(store);
  
  const alert = ref(null);
  const paging = ref(null);

  onLoad(() => {
    console.log('load',alert.value);
    toast('欢迎使用')
    // alert.value?.open()
    // console.log('store',store.state.user);
    // setTimeout(() => {
    //   toast('欢迎使用')
    // }, 1000)
  })

  const showAlert = () => {
    console.log('showAlert');
    alert.value?.open()
    title.value = 'Hello World1'
    info.name = 'xy1';
  }

  const queryList = (pageNo,pageSize) => {
    loading('加载中...')
    try {
      setTimeout(() => {
        loading(false)
        paging.value?.complete([1,2,3,4,5,6,7,8,9,10])
      }, 2000)
    } catch (error) {
      loading(false)
      paging.value?.complete(false)
    }
  }

  const computedTitle = computed(() => {
    console.log("computedTitle", title.value + info.name)
    return title.value + info.name
  })

  const stopWatch = watch(title, (newVal, oldVal) => {
    console.log('watch',newVal, oldVal);
  }) 
  const stopWatch1 = watch(info, (newVal, oldVal) => {
    console.log("info.name", newVal, oldVal)
  })


  const didTapItem = (index) => {
    console.log('didTapItem',index)
    store.updateUserId(index)
  }
  const reset = () => {
    console.log('reset')
    store.$reset() 
  }

</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
